<template>
	<view :class="{showbottom :showbottom || showshare}" @touch.prevent v-if="ym">
		<view class="swiper">
			<uni-swiper-dot :info="good.goodimgList" :current="current" field="content" mode="round"
				:dots-styles="dotStyle">
				<swiper @change="change" autoplay class="swiperContainer">
					<swiper-item v-for="item in good.goodimgList" :key="item">
						<image :src="item" />
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>



		<view>
			<view class="detail">
				<label>{{good.goodName}}</label>
			</view>

			<view class="price">
				<label>￥{{price}}</label>
				<label>￥{{good.goodPrice}}</label>
			</view>

			<view class="sj">
				<label>销量:{{good.goodSold}}</label>
				<label>收藏量:{{good.goodCollect}}</label>
				<label>浏览量:{{good.goodLook}}</label>
			</view>


			<view :class="{'qua':true , 'active' : xs}" @click="btn()">
				<label class="title">购买类型</label>

				<block v-if="xs">
					<view class="val">
						<label>{{type.val}}</label>
					</view>

					<label>{{type.num}}个</label>
				</block>


			</view>

			<view class="promotion">
				<label class="title">促销活动</label>
				<view class="name">
					<label v-for="item in good.goodpromotion" :key="item.name">
						{{item.name}}
					</label>
				</view>
			</view>

			<view class="service">
				<label class="title">服务</label>
				<view class="name2">
					<label v-for="item in good.goodservice" :key="item.name">
						{{item.name}}
					</label>
				</view>
			</view>

			<view class="commect" @click="btn3()">
				<label>评价
					<label class="title">
						({{commectDetail}})
					</label>
				</label>

				<label class="title">好评率 {{favorale}}%</label>
			</view>

			<view class="commectdetail" v-if="isShow">
				<view v-for="item in good.goodCommectDetail" :key="item.uid" class="div">
					<view class="img">
						<image :src="item.userface" mode="widthFix"></image>
					</view>
					<view>
						<view class="text">
							<label class="username">{{item.username}}</label>
						</view>
						<view class="text">
							<label>{{item.content}}</label>
						</view>
						<view class="shopimg">
							<view v-for="val in item.imgList" :key="val">
								<image :src="val" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="imglist">
			<label>图文详情</label>
			<view v-for="(item,index) in good.goodimgList" :key="item">
				<image :src="item" mode="widthFix" :class="{style:(index == good.goodimgList.length-1)}"></image>
			</view>

		</view>

		<view class="fixed-bottom">
			<view class="ul">
				<view class="li">
					<image src="../static/kf.png" mode="widthFix"></image>
					<label>客服</label>
				</view>
				<view class="li" @click="gohome()">
					<image src="../static/home.png" mode="widthFix"></image>
					<label>首页</label>
				</view>
				<view class="li" @click="gocart()">
					<image src="../static/cart.png" mode="widthFix"></image>
					<label>购物车</label>
				</view>
				<view class="cart-item1" @click="btn2(1)">
					加入购物车
				</view>
				<view class="cart-item" @click="btn2(2)">
					立即购买
				</view>
			</view>
		</view>
		<u-popup mode="bottom" :round="10" @close="close" @open="open" :show="showbottom" :closeable="true">
			<good-qua :item="good" @get='getType'></good-qua>
		</u-popup>

		<u-popup mode="bottom" :round="10" @close="closes" @open="opens" :show="showshare" :closeable="true">
			<view class="share">
				<view class="ul">
					<image src="../static/share/weixin.png" mode="widthFix"></image>
					<label>微信</label>
				</view>
				<view class="ul">
					<image src="../static/share/pengyouquan.png" mode="widthFix"></image>
					<label>朋友圈</label>
				</view>
				<view class="ul">
					<image src="../static/share/qq.png" mode="widthFix"></image>
					<label>QQ</label>
				</view>
				<view class="ul">
					<image src="../static/share/copy.png" mode="widthFix"></image>
					<label>复制</label>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		apiGood
	} from '../../api/mock';
	export default {
		onLoad(e) {
			uni.showLoading({
				title: '加载中...'
			})
			this.getGood(e.id);
		},
		data() {
			return {
				good: {},
				show: true,
				showbottom: false,
				current: 0,
				dotStyle: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					selectedBackgroundColor: 'rgba(255, 255, 255, 0.9)',
				},
				isShow: false,
				type: {},
				showshare: false,
				xs: false,
				ym: false,
			}
		},
		methods: {
			gohome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			gocart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			btn() {
				if (this.xs) {
					this.showbottom = true;
				}
			},
			btn2(x) {
				if (!this.xs) {
					this.showbottom = true;
				} else {
					if (x == 1) {
						let name = this.good.goodName.substring(5);
						let cart = {
							'goodImg': this.good.goodImg,
							'goodName': name,
							'type' : this.type.val,
							'goodPrice': this.good.goodPrice,
							'goodSold': this.good.goodSold,
							'count': this.type.num,
							"selected": false,
							"show": false,
							"isShow": 'none'
						}
						console.log(cart);
						uni.setStorageSync('cart', cart);
						uni.switchTab({
							url: '/pages/cart/cart'
						})
					}
					if(x == 2){
						console.log(this.good);
						let name = this.good.goodName.substring(5);
						let dd = {
							deal : '待付款',
							buy_time : new Date(),
							timeupSecond : null,
							goodsList:[{
								goodsUrl : this.good.goodImg,
								title : name,
								type :  this.type.val,
								deliveryTime : '待付款后30天内发货',
								price : this.good.goodPrice,
								number : this.type.num
							}]
						} 
						uni.setStorageSync('dd', dd);
						uni.navigateTo({
							url: '/page_order/order/order?index=0'
						})
					}
				}
			},
			btn3() {
				this.isShow = !this.isShow
			},
			getType(data) {
				this.type = data;
				this.xs = true;
				this.close();
			},
			close() {
				this.showbottom = false
			},
			open() {
				this.showbottom = true
			},
			closes() {
				this.showshare = false
			},
			opens() {
				this.showshare = true
			},
			getGood(id) {
				apiGood(id).then((res) => {
					this.ym = true;
					this.good = res;
					uni.hideLoading();
				}).catch((err) => {
					console.log(err);
				})
			},
			change(e) {
				this.current = e.detail.current;
			}
		},
		onNavigationBarButtonTap(e) {
			this.showshare = true
		},
		computed: {
			price() {
				return (this.good.goodPrice * 1.1).toFixed(2)
			},
			commectDetail() {
				let length = 0;
				if (this.good.goodCommectDetail) {
					length = this.good.goodCommectDetail.length
				}
				return length;
			},
			favorale() {
				let num = 0;
				if (this.good.goodCommectDetail) {
					this.good.goodCommectDetail.forEach((item) => {
						if (item.favorale == 1) {
							num++;
						}
					})
				}
				return num / this.commectDetail * 100;
			}
		}
	}
</script>

<style lang="scss">
	.style {
		padding-bottom: 70px;
	}

	.showbottom {
		overflow: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.swiper {
		height: 200px;
	}

	.swiperContainer {
		height: 190px;
	}

	.swiperContainer image {
		width: 100%;
		height: 100%;
	}

	.detail {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30px;
	}

	.price {
		display: flex;
		justify-content: flex-start;
		margin-left: 50px;

	}

	.price label:nth-child(1) {
		text-decoration: line-through;
		color: #888;
	}

	.price label:nth-child(2) {
		margin-left: 10px;
		color: red;
	}

	.sj {
		display: flex;
		justify-content: space-around;
		color: #888;
	}

	.qua {
		margin-top: 30px;
		margin-left: 30px;
	}

	.active {
		margin-top: 30px;
		display: flex;
		justify-content: space-around;
		margin-left: 5px;
	}

	.qua .val {
		width: 9em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.title {
		color: #888;
	}

	.promotion {
		display: flex;
		justify-content: space-around;
		margin-top: 18px;
	}

	.promotion label:nth-child(1) {
		display: flex;
		align-items: center;
	}

	.promotion .name {
		display: flex;
		flex-direction: column;
	}

	.promotion .name label {
		margin-top: 10px;
	}

	.service {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.service .name2 {
		width: 55%;
		display: flex;
		justify-content: space-around;
	}

	.commect {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.imglist {
		margin-top: 30px;
	}

	.imglist label {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.imglist view image {
		width: 100%;
		height: 100px;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		/* 或者您希望的其他颜色 */
		z-index: 999;
		/* 确保它显示在其他内容之上 */
		padding: 10px 0;
		/* 根据需要调整内边距 */
	}

	.fixed-bottom .ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.fixed-bottom .ul .li {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.fixed-bottom .ul .li image {
		width: 30px;
		padding-bottom: 5px;
	}

	.fixed-bottom .cart-item1 {
		height: 50px;
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: red;
		color: white;
		border-radius: 40px;
	}

	.fixed-bottom .cart-item {
		height: 50px;
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: orange;
		color: white;
		border-radius: 40px;
	}

	.commectdetail {
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.commectdetail .div {
		display: flex;
		margin-bottom: 20px;
	}

	.commectdetail .img {
		margin-right: 10px;
	}

	.commectdetail .img image {
		width: 50px;

		border-radius: 50px;
	}

	.shopimg {
		display: flex;

	}

	.shopimg image {
		width: 80px;
	}

	.text {
		margin-bottom: 10px;
	}

	.username {
		color: #888;
	}

	.share {
		display: flex;
		justify-content: space-around;
		height: 150px;
	}

	.share .ul {
		margin-top: 50px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.share .ul image {
		width: 50px;
	}

	.share view:nth-child(4) image {
		width: 35px;
		margin-top: 10px;
	}
</style>